<template>

    <el-form :rules="rules" status-icon :ref="formRef" :model="form" label-width="20%" style="width: auto" class="my-border">
        <el-form-item label="我是" prop="type">
            <el-radio-group v-model="form.type" @change="onChangeType">
                <el-radio :label="1">个人</el-radio>
                <el-radio :label="2">公司或组织机构</el-radio>
            </el-radio-group>
        </el-form-item>

        <div v-if="form.type === 1">

            <el-form-item label="姓名" prop="XM" >
                <el-input v-model="form.XM" ></el-input>
            </el-form-item>

            <el-form-item label="身份证件号码" prop="ZJHM" >
                <el-input v-model="form.ZJHM" ></el-input>
            </el-form-item>
        </div>



        <div v-if="form.type === 2">

            <el-form-item label="公司或组织机构名称" prop="XM" >
                <el-input v-model="form.XM" ></el-input>
            </el-form-item>

            <el-form-item label="统一社会信用代码" prop="ZJHM" >
                <el-input v-model="form.ZJHM" ></el-input>
            </el-form-item>
        </div>


        <el-form-item>
            <el-button type="primary" @click="submitForm('f1')">验证</el-button>
            <el-button @click="resetForm('f1')">重置</el-button>

        </el-form-item>

      <el-form-item>
        <el-link type="primary" href="czzn.pdf" target="_blank"  :underline="true" style="font-size: 30px">查看操作指南</el-link>
      </el-form-item>

    </el-form>

</template>

<script>
    import IDValidator from 'id-validator';

    import {mapActions} from 'vuex';


    export default {
        name: "Verify",

        data(){

            let idValidator = new IDValidator();

            let XMValidator = (rule,value,callback) => {


                if(this.form.type === 1){

                    if (!value || value === '') {
                        return callback(new Error('姓名不能为空'))
                    }
                }else{
                    if (!value || value === '') {
                        return callback(new Error('公司或组织机构名称不能为空'))
                    }
                }

                callback();
            }

            let ZJHMValidator =  (rule,value,callback) => {
                if(this.form.type === 1){
                    if (!value || value === '') {
                        return callback(new Error('身份证号码不能为空'))
                    }
                    if (!idValidator.isValid(value)) {
                        return callback(new Error('身份证号码不正确'))
                    }

                }else{
                    if (!value || value === '') {
                        return callback(new Error('统一社会信用代码不能为空'))
                    }
                }
                callback();
            }

            return {

                formRef : 'f1',
                form:{
                    type:1,
                    XM: '',
                    ZJHM:'',
                },

                rules:{
                    XM:[

                        {required:true,validator:XMValidator,trigger:'blur'}
                    ],
                    ZJHM:[

                        {required:true,validator:ZJHMValidator,trigger:'blur'}
                    ]
                }
            }
        }


        , methods: {

            ...mapActions([
                'getToken','setToken','resetToken','setStep'
            ]),

            onChangeType(v) {

                this.$refs[this.formRef].clearValidate();
                this.form ={
                    XM: '',
                    ZJHM:'',
                    type:v
                };
            },

            submitForm(refs) {



                this.$refs[refs].validate(valid=>{
                    if (valid) {

                        this.$api.verify(this.form)
                            .then(res=>{
                               this.setToken(res.data.token)
                                this.setStep(1)
                            }).catch(err=>{
                                this.resetToken();

                            })


                    }else{

                        return false;
                    }
                })
            },

            resetForm(refs) {
                this.$refs[refs].resetFields();
            },

            openTip(){
              this.$confirm('填写前请阅读操作指南','提示',{
                confirmButtonText:'查看操作指南',
                cancelButtonText:'取消',
              }).then(() => {
                window.open('czzn.pdf','_blank')
              })
            }
        },

      mounted() {
        this.openTip();
      }

    }
</script>

<style scoped>
    .el-form{
        width: 80%;
    }
</style>